<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>$attrs和$listeners</title>
    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>      
      const app = Vue.createApp({
        template: `
          <child1 :p-child1="'child1'" :p-child2="'child2'" other="其它none Props属性" @test1="onTest1" @test2="onTest2"></child1>
        `,
        methods: {
          onTest1() {
            console.log('test1 running')
          },
          onTest2() {
            console.log('test2 running')
          }
        }
      })
      app.component('child1', {
        template: `
        <div class="child-1">
          <p>props: {{pChild1}}</p>
          <p>$attrs: {{$attrs}}</p>
          <child2 v-bind="$attrs"></child2>
        </div>
        `,
        inheritAttrs: false,
        props: ['pChild1'],
        mounted () {
          console.log(this.$attrs)
          this.$emit('test1') // 触发APP.vue中的test1方法
        }
      })
      app.component('child2', {
        template: `
        <div class="child-2">
          <p>props: {{pChild2}}</p>
          <p>$attrs: {{$attrs}}</p>
        </div>
        `,
        inheritAttrs: false,
        props: ['pChild2'],
        mounted () {
          console.log('child2', this.$attrs)
          this.$emit('test2')// 触发APP.vue中的test2方法
        }
      })
      app.mount('#app')
    </script>
</body>
</html>